import React, { Component } from 'react'

export default class Todolist_list extends Component {
    render() {
        const {list} = this.props;
        return (
            <div>
                {/* 显示个数 */}
                <h2>正在进行{list.length}</h2>
                <ul>
                    {/* map的回调函数：当前被处理的元素，当前元素的索引（下标，本身。
                        传入的值（元素）是val 下标是index*/}
                    {list.map ( (val,index) => <li key={val.time}> 
                        <input type="checkbox" />
                        {/* 如果有多个属性，一个字符串无法满足则放入一个对象中，
                        其中的名字可以自己取，如title、time */}
                        {val.title}
                        ------
                        {val.time}
                        {/* 点击事件的函数绑定要绑定的是一个函数。
                            箭头函数是事件处理函数，箭头函数()中的数值是事件对象（形参) */}
                        <button onClick={ ()=> this.props.delItem(index)}>
                            删除
                        </button>
                    </li>)}
                </ul>
                <h2>已经完成</h2>
            </div>
        )
    }
}
